<!-- <template>
    <van-cell-group>
        <van-cell title="购物车" />
        <van-card
            v-for="item in cartData"
            :key="item.id"
            :num="item.quantity"
            :price="(item.price * item.quantity).toFixed(2)"
            :desc="item.description"
            :title="item.name"
            :thumb="item.image"
        />
        <van-submit-bar :price="totalPrice" button-text="去结算">
            <van-badge :count="cartData.length" />
        </van-submit-bar>
    </van-cell-group>
</template>

<script setup>
import {ref, computed, onMounted} from "vue"
import {AxiosResponse} from "axios"
import {getCartData} from "../../api"

const cartData = ref([]);

const getData = async () => {
    let res: AxiosResponse = await getCartData()
    console.log(res)
    if (res.status === 200) {
        cartData.value = res.data;
    }
}

const totalPrice = computed(() => {
    return cartData.value.reduce((sum: number, item: any) => sum + (item.price * item.quantity), 0) * 100; // Convert to cents for van-submit-bar
});

onMounted(() => {
    getData()
})
</script> -->


<template>
  <div class="page-container">
    <van-nav-bar 
      title="购物车" 
      fixed 
      placeholder 
      safe-area-inset-top 
      left-arrow
      @click-left="$router.back()"
    />
    
    <div class="cart-container">
      <van-checkbox-group v-model="checkedIds">
        <van-swipe-cell v-for="item in cartData" :key="item.id">
          <van-cell center>
            <template #icon>
              <van-checkbox :name="item.id" />
            </template>
            <template #title>
              <div class="cart-item">
                <van-image 
                  :src="item.image" 
                  width="80" 
                  height="80"
                  fit="cover"
                />
                <div class="cart-info">
                  <div class="title">{{ item.name }}</div>
                  <div class="desc">{{ item.description }}</div>
                  <div class="price">¥{{ item.price.toFixed(2) }}</div>
                </div>
              </div>
            </template>
          </van-cell>
          <template #right>
            <van-button 
              square 
              text="删除" 
              type="danger" 
              class="delete-button" 
              @click="removeItem(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
      
      <div class="empty-cart" v-if="cartData.length === 0">
        <van-empty description="购物车空空如也">
          <van-button 
            round 
            type="primary" 
            class="bottom-button"
            to="/tool/index"
          >
            去逛逛
          </van-button>
        </van-empty>
      </div>
    </div>
    
    <van-submit-bar 
      v-if="cartData.length > 0"
      :price="totalPrice * 100" 
      button-text="去结算" 
      button-color="linear-gradient(to right, #ff6034, #ee0a24)"
    >
      <van-checkbox v-model="allChecked" @click="toggleAll">
        全选
      </van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getCartData } from '../api'
import type { CartItem } from '../api/interface'

const cartData = ref<CartItem[]>([])
const checkedIds = ref<number[]>([])

const getData = async () => {
  try {
    const res = await getCartData()
    if (res.status === 200) {
      cartData.value = res.data
    }
  } catch (error) {
    console.error('获取购物车数据失败:', error)
  }
}

const totalPrice = computed(() => {
  return cartData.value.reduce((sum, item) => {
    if (checkedIds.value.includes(item.id)) {
      return sum + (item.price * item.quantity)
    }
    return sum
  }, 0)
})

const allChecked = computed({
  get() {
    return cartData.value.length > 0 && 
           cartData.value.every(item => checkedIds.value.includes(item.id))
  },
  set(val: boolean) {
    checkedIds.value = val ? cartData.value.map(item => item.id) : []
  }
})

const toggleAll = () => {
  allChecked.value = !allChecked.value
}

const removeItem = (id: number) => {
  cartData.value = cartData.value.filter(item => item.id !== id)
  checkedIds.value = checkedIds.value.filter(itemId => itemId !== id)
}

onMounted(() => {
  getData()
})
</script>

<style scoped>
.page-container {
  padding-bottom: 50px;
}

.cart-container {
  padding-bottom: 100px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.cart-info {
  flex: 1;
  padding-left: 10px;
}

.cart-info .title {
  font-size: 14px;
  font-weight: bold;
}

.cart-info .desc {
  font-size: 12px;
  color: #999;
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-info .price {
  color: #ee0a24;
  font-weight: bold;
}

.delete-button {
  height: 100%;
}

.empty-cart {
  padding-top: 100px;
}

.bottom-button {
  width: 160px;
  height: 40px;
}
</style>